<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录 — UnaBoot</title>
    <link rel="icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="shortcut icon" href="${una}/ub-admin/img/favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/fontawesome-free/css/all.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/font-awesome.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/adminlte.min.css">
    <link rel="stylesheet" href="${una}/ub-admin/plugin/layer/skin/default/layer.css">
    <link rel="stylesheet" href="${una}/ub-admin/css/unaboot-login.css">
    <style>
        label.error{
            color: #d81b60!important;
            font-size: 11px!important;
            font-weight: normal!important;
        }
    </style>
</head>
<body>
    <div class="background-box">
        <div id="background-img">
            <img src="${una}/ub-admin/img/login_background.svg">
        </div>
    </div>
    <div class="login-box">
        <div class="ribbon-wrapper ribbon-lg">
            <div class="ribbon bg-gray text-lg" style="text-transform: none!important;">
                <a href="https://github.com/ramostear/UnaBoot" target="_blank">
                    <i class="fa fa-github"></i> ForkMe
                </a>
            </div>
        </div>
        <div class="card card-default card-outline p-4">
            <div class="card-header border-bottom-0">
                <img src="${una}/ub-admin/img/logo-blue.svg" class="login-img">
            </div>
            <div class="card-body">
                <#if logoutMsg??>
                    <p class="message">${logoutMsg}</p>
                <#else>
                    <p class="message _hidden"></p>
                </#if>
                <form id="login-form">
                    <div class="form-group mt-2">
                        <input type="text" name="account" class="form-control" placeholder="用户名或电子邮箱" autocapitalize="off" autocomplete="off">
                    </div>
                    <div class="form-group mt-2">
                        <input type="password" name="password" class="form-control" placeholder="密码">
                    </div>
                    <div class="form-group mt-2" style="overflow: hidden;">
                        <input type="text" name="captcha" placeholder="验证码" class="form-control pull-left mr-2" style="width: 50%" autocomplete="off">
                        <img src="" onclick="getCaptcha();" class="img-thumbnail pull-right captcha">
                    </div>
                    <div class="form-group text-center mt-2">
                        <div class="custom-checkbox custom-control-inline text-left" style="width: 50%">
                            <input type="checkbox" class="custom-control-input"  id="remember-me" name="rememberMe" value="1">
                            <label class="custom-control-label font-weight-normal" style="padding-top: 4px;margin-top:5px;left: -10px;cursor: pointer;" for="remember-me">记住我的登录信息</label>
                        </div>
                        <button type="button" id="login-btn" class="btn btn-primary pull-right">登录</button>
                    </div>
                </form>
            </div>
        </div>
        <p class="back-home">
            <a href="${una}/index.html">← 返回到主页</a>
        </p>
    </div>
    <script src="${una}/ub-admin/plugin/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/bootstrap/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.serialize.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/jquery/jquery.form.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/adminlte.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/plugin/layer/layer.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/jquery.validate.min.js" type="text/javascript"></script>
    <script src="${una}/ub-admin/js/main.js" type="text/javascript"></script>
    <script type="text/javascript">
        getCaptcha();
        function getCaptcha(){
            $("img.captcha").attr("src",randomUrl("${una}/captcha"));
        }
        function randomUrl(url){
            var timestamp = new Date().getTime();
            if(url.indexOf("?") > -1){
                url = url+"&timestamp="+timestamp;
            }else{
                url = url+"?timestamp="+timestamp;
            }
            return url;
        }
        var form = $("#login-form");
        form.validate({
            errorPlacement: function errorPlacement(error, element) {
                element.after(error);
            },
            rules:{
                account:{
                    required:true
                },
                password:{
                    required:true
                },
                captcha:{
                    required:true,
                    maxlength:6,
                    minlength:6
                }
            },
            messages:{
                account:{
                    required:'请输入您的登录账号'
                },
                password:{
                    required:'请输入您的登录密码'
                },
                captcha:{
                    required:'请输入验证码',
                    maxlength:'验证码不正确',
                    minlength:'验证码不正确'
                }
            }
        });
        $("#login-btn").on("click",function(){
           var flag = form.valid();
           if(flag){
               var data = JSON.stringify($("#login-form").serializeJSON());
               var load = layer.load(2,{
                   shade:[0.4,'#f0f0f0'],
                   shadeClose:false
               });
               $.ajax({
                   type:'POST',
                   url:'${una}/admin/login',
                   data:data,
                   contentType:'application/json;charset=utf-8',
                   success:function(res){
                       layer.close(load);
                       if(res != null || res !== ""){
                           window.location.href = res;
                       }else{
                           window.location.href = "${una}/admin/index";
                       }
                   },
                   error:function(res){
                       layer.close(load);
                       var msg =$("p.message");
                       msg.html(res.responseText);
                       msg.removeClass("_hidden");
                   }
               });
           }
        });
    </script>
</body>
</html>